<template>
	<view>
		<!-- 1,主要输入框 -->
		<view class="top-text">
			<textarea placeholder="请留下您的宝贵意见,我们将持续改进产品,一经采纳,我们将为您提供丰富的礼品" v-model="textValue" @input="changeText"
				maxlength="300"></textarea>
		</view>
		<view class="tips">
			<text>还能输入{{300 - textValue.length}}字</text>
		</view>
		<!-- 2，提交按钮 -->
		<my-bottom-btn :title="titleName" @clickBtn="clickBtn"></my-bottom-btn>
	</view>
</template>

<script>
	import myBottomBtn from '@/components/common/my-bottom-btn/my-bottom-btn.vue'

	export default {
		components: {
			myBottomBtn
		},
		data() {
			return {
				textValue: '',
				titleName: '提交'
			}
		},
		methods: {
			changeText(e) {

			},
			clickBtn() {
				if (this.textValue.length == 0) {
					return uni.$showMsg('请输入您的反馈')
				}
				uni.$showMsg('谢谢您的反馈，祝您生活愉快！')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-text {
		width: 100%;

		textarea {
			width: 90%;
			height: 400rpx;
			border-radius: 30rpx;
			padding: 2%;
			margin-left: 3%;
			margin-top: 30rpx;
			border: 1rpx solid #eee;
		}
	}

	.tips {
		width: 94%;
		margin-left: 3%;
		text-align: right;
		margin-top: 20rpx;

		text {
			font-size: 32rpx;
			color: rgba(128, 128, 128, 1);
		}
	}
</style>
